import React, { Component, PureComponent } from 'react'
import { Button, Form, Input, message } from 'antd';
import navigateTo from "../utils/navigate"
import api from "../apis/user"

class Login extends Component {
    state = {
        loading: false
    }
    onFinish = (values) => {
        api.login({ account: values.username, password: values.password }).then(res => {
            message.success("登陆成功")
            const { token, permissions, userInfo } = res
            localStorage.setItem("token", token)
            localStorage.setItem("permissions", JSON.stringify(permissions))
            localStorage.setItem("userInfo", JSON.stringify(userInfo))
            this.props.router.navigate("/nav")
        }).catch(err => {
            console.log(err);
        })
        this.setState({ loading: true })
    };
    onFinishFailed = (errorInfo) => {
        console.log('Failed:', errorInfo);
    };
    render() {
        return (
            <div className='login'>
                <Form
                    labelCol={{
                        span: 8,
                    }}
                    wrapperCol={{
                        span: 16,
                    }}
                    style={{
                        width: 500,
                        color: "red"
                    }}
                    initialValues={{
                        remember: true,
                    }}
                    onFinish={this.onFinish}
                    onFinishFailed={this.onFinishFailed}
                    autoComplete="off"
                >
                    <Form.Item
                        className='formItem'
                        label={<div style={{ color: "#ffffff" }}>用户名</div>}
                        name="username"
                        style={{ color: "#ffffff" }}
                        rules={[
                            {
                                required: true,
                                message: '用户名不能为空!',
                            },
                        ]}
                    >
                        <Input />
                    </Form.Item>

                    <Form.Item
                        label={<div style={{ color: "#ffffff" }}>密码</div>}
                        name="password"
                        rules={[
                            {
                                required: true,
                                message: '密码不能为空!',
                            },
                        ]}
                    >
                        <Input.Password />
                    </Form.Item>

                    <Form.Item
                        wrapperCol={{
                            offset: 8,
                            span: 16,
                        }}
                    >
                        <Button loading={this.state.loading} type="primary" htmlType="submit">
                            登录
                        </Button>
                    </Form.Item>
                </Form>
            </div>
        )
    }
}
export default navigateTo(Login)